<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c" %>
<%@ taglib uri="http://java.sun.com/jsp/jstl/fmt"  prefix="fmt"%>
<% String path = request.getContextPath(); %>
<html>
<head>
	<meta charset="utf-8">
	<meta name="renderer" content="webkit|ie-comp|ie-stand">
	<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
	<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no" />
	<meta http-equiv="Cache-Control" content="no-siteapp" />
	<link rel="Bookmark" href="<%=path%>/static/favicon.ico" >
	<link rel="Shortcut Icon" href="<%=path%>/static/favicon.ico" />
	<!--[if lt IE 9]>
	<script type="text/javascript" src="lib/html5shiv.js"></script>
	<script type="text/javascript" src="lib/respond.min.js"></script>
	<![endif]-->
	<link rel="stylesheet" type="text/css" href="<%=path%>/static/static/h-ui/css/H-ui.min.css" />
	<link rel="stylesheet" type="text/css" href="<%=path%>/static/static/h-ui.admin/css/H-ui.admin.css" />
	<link rel="stylesheet" type="text/css" href="<%=path%>/static/lib/Hui-iconfont/1.0.8/iconfont.css" />
	<link rel="stylesheet" type="text/css" href="<%=path%>/static/static/h-ui.admin/skin/default/skin.css" id="skin" />
	<link rel="stylesheet" type="text/css" href="<%=path%>/static/static/h-ui.admin/css/style.css" />
	<!--[if IE 6]>
	<script type="text/javascript" src="lib/DD_belatedPNG_0.0.8a-min.js" ></script>
	<script>DD_belatedPNG.fix('*');</script>
	<![endif]-->
	<title>3D柱状图</title>
</head>
<body>
<% HttpSession s = request.getSession();  %>
<nav class="breadcrumb"><i class="Hui-iconfont">&#xe67f;</i> 首页 <span class="c-gray en">&gt;</span> 课程平均分统计 <span class="c-gray en">&gt;</span> 3D柱状图 <a class="btn btn-success radius r" style="line-height:1.6em;margin-top:3px" href="javascript:location.replace(location.href);" title="刷新" ><i class="Hui-iconfont">&#xe68f;</i></a></nav>
<div class="page-container">
	<div id="container" style="min-width:700px;height:400px"></div>
</div>
<!--_footer 作为公共模版分离出去-->
<script type="text/javascript" src="<%=path%>/static/lib/jquery/1.9.1/jquery.min.js"></script>
<script type="text/javascript" src="<%=path%>/static/lib/layer/2.4/layer.js"></script>
<script type="text/javascript" src="<%=path%>/static/static/h-ui/js/H-ui.min.js"></script>
<script type="text/javascript" src="<%=path%>/static/static/h-ui.admin/js/H-ui.admin.js"></script> <!--/_footer 作为公共模版分离出去-->

<!--请在下方写此页面业务相关的脚本-->
<script type="text/javascript" src="<%=path%>/static/lib/hcharts/Highcharts/5.0.6/js/highcharts.js"></script>
<script type="text/javascript" src="<%=path%>/static/lib/hcharts/Highcharts/5.0.6/js/modules/exporting.js"></script>
<script type="text/javascript" src="<%=path%>/static/lib/hcharts/Highcharts/5.0.6/js/highcharts-3d.js"></script>
<script type="text/javascript">
	﻿$(function () {
		// Set up the chart
		var data1 = new Array([${size}]);　//创建一个数组
		var str1 = new Array([${size}]);　//创建一个数组
		<c:forEach items="${data}" var="c" varStatus="status">
		data1.push(${c});
		</c:forEach>
		<c:forEach items="${str}" var="c" varStatus="status">
		str1.push("${c}");
		</c:forEach>
		var data = new Array();　//创建一个数组
		var str = new Array();　//创建一个数组
		for (var i = 1; i < data1.length; i++) {
			data.push(data1[i]);
		}
		for (var i = 1; i < str1.length; i++) {
			str.push(str1[i]);
		}
		var chart = new Highcharts.Chart({
			chart: {
				renderTo: 'container',
				type: 'column',
				margin: 75,
				options3d: {
					enabled: true,
					alpha: 15,
					beta: 15,
					depth: 50,
					viewDistance: 25
				}
			},
			title: {
				text: '课程平均分统计'
			},
			subtitle: {
				text: 'About every course avg score statistics'
			},
			plotOptions: {
				column: {
					depth: 25
				}
			},
			xAxis: {
				categories: str
			},
			yAxis: {
				title: {
					text: '平均分'
				}
			},
			series: [{
				name: '课程',
				data:data
			}]
		});


		// Activate the sliders
		$('#R0').on('change', function(){
			chart.options.chart.options3d.alpha = this.value;
			showValues();
			chart.redraw(false);
		});

		$('#R1').on('change', function(){
			chart.options.chart.options3d.beta = this.value;
			showValues();
			chart.redraw(false);
		});

		function showValues() {
			$('#R0-value').html(chart.options.chart.options3d.alpha);
			$('#R1-value').html(chart.options.chart.options3d.beta);
		}

		showValues();
	});
</script>
</body>
</html>